<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 头部卡片 -->
      <div slot="header" class="clearfix">
      <el-button
      style="float: right; padding: 10px 10px"
      type="success"
      size="medium">
      <i class="el-icon-edit"></i>新增试题
      </el-button>
      </div>
      <div class="top">
      <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">
         <!-- 筛选框区域 -->
      <selected-sub @getSubId='getSub' @delCatalogID='clearCatalog'></selected-sub>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
       <!-- 二级目录 -->
      <div class="erji">
        <b style="margin-right:15px">二级目录</b>
        <el-select v-model="catalogID" placeholder="请选择" style="width:300px">
        <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.directoryName"
        :value="item.id">
        </el-option>
    </el-select>
      </div>
        </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 学科对应的标签 -->
      <selected-tags ref="selectedTags"></selected-tags>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 关键字输入 -->
      <div class="keyword">
        <b style="margin-right:15px">关键字</b>
        <el-input v-model="content" style="width:300px"></el-input>
      </div>
        </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 试题类型 -->
      <div class="type">
        <b style="margin-right:15px">试题类型</b>
        <el-select v-model="questionType" style="width:300px" placeholder="请选择" >
      <el-option
        v-for="item in questionsType"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
      </div>
        </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
              <!-- 难度 -->
      <div class="nandu">
        <b style="margin-right:15px;margin-left:29px">难度</b>
        <el-select v-model="difficulty" placeholder="请选择" style="width:300px">
      <el-option
        v-for="item in difficultys"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
      </div>
        </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
              <!-- 方向 -->
      <div class="direction">
        <b style="margin-right:15px">方向</b>
        <el-select v-model="direction" placeholder="请选择" style="width:300px">
      <el-option
        v-for="(item,idx) in directions"
        :key="idx"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
      </div>
        </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
              <!-- 录入人 -->
        <selected-creator @sendCreatorId="saveCreator"></selected-creator>
          </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 题目备注 -->
        <div class="remarks">
          <b style="margin-right:15px">题目备注</b>
          <el-input v-model="content" style="width:300px"></el-input>
        </div>
          </div>
          </el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 企业简称 -->
        <div class="name">
          <b style="margin-right:15px">企业简称</b>
          <el-input v-model="content" style="width:300px"></el-input>
        </div>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 城市 -->
        <selected-city></selected-city>
          </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 按钮 -->
        <div class="btns" style="margin-left:215px">
          <el-button>清除</el-button>
          <el-button type="primary">搜索</el-button>
        </div>
          </div></el-col>
        </el-row>
      </div>
    <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="全部" name="first">
      <question-list></question-list>
    </el-tab-pane>
    <el-tab-pane label="待审核" name="second">待审核</el-tab-pane>
    <el-tab-pane label="已审核" name="third">已审核</el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth">已拒绝</el-tab-pane>
  </el-tabs>
    </el-card>
  </div>
</template>

<script>
import QuestionList from '../components/questions-check'
// import { randoms } from '@/api/hmmm/companys'
import { list } from '@/api/hmmm/directorys'
import SelectedSub from '../components/select/selected-subjects'
import SelectedTags from '../components/select/selected-tags'
import SelectedCreator from '../components/select/selected-creator'
import SelectedCity from '../components/select/selected-city'

export default {
  components: {
    SelectedSub,
    SelectedTags,
    SelectedCreator,
    SelectedCity,
    QuestionList
  },
  data () {
    return {
      activeName: 'first',
      options: [],
      sub_id: null, // 学科id
      catalogID: null, // 二级目录id
      content: '', // 关键字
      questionType: null, // 试题类型
      difficulty: null, // 难度
      direction: null, // 方向 str
      creatorID: null, // 录入人id
      // o2o，外包服务，企业服务，互联网金融，企业咨询，互联网，电子商务，其他
      directions: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      questionsType: [{
        value: '1',
        label: '单选'
      }, {
        value: '2',
        label: '多选'
      }, {
        value: '3',
        label: '简单'
      }],
      difficultys: [{
        value: '1',
        label: '简单'
      }, {
        value: '2',
        label: '一般'
      }, {
        value: '3',
        label: '困难'
      }]
    }
  },
  created () {
  },
  methods: {
    // 获取传过来的学科id 并根据id获取二级目录
    async getSub (val) {
      this.sub_id = val
      this.$refs.selectedTags.request(this.sub_id)
      const res = await list({
        subjectID: this.sub_id
      })
      this.options = res.data.items
    },
    // 清空二级目录的数据
    clearCatalog () {
      this.catalogID = null
    },
    // 保存录入人id
    saveCreator (creatorId) {
      this.creatorID = creatorId
    }
  }
}
</script>

<style  lang='less'>
 .el-card__body {
   .top {
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        .el-col {
          margin-top: 20px
        }
        }
      }
  }
</style>
